/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template>
  <view v-if="orderDetail">
    <view class="order-list pd-bg-fff">
      <view class="order-price">
        <view>订单金额</view>
        <view class="co-red">￥{{orderDetail.order_amount}}</view>
      </view>
      <view class="order-id">
        <view>订单编号</view>
        <view
          class="id"
          v-if="orderDetail"
        >{{orderDetail.master_order_sn?orderDetail.master_order_sn:orderDetail.order_list[0].master_order_sn}}</view>
      </view>
    </view>
    <view class="pay-way pd-bg-fff">
      <view class="title">支付方式</view>
      <block
        v-for="(item,index) in pay_method"
        :key="index"
      >
        <view
          @tap="checkPayWay"
          class="pay-item"
          :data-method="item.method"
        >
          <label
            role="radio"
            aria-disabled="false"
            aria-checked="true"
          >
            <view>
              <radio
                aria-checked="true"
                color="#fa4949"
                :value="item.name"
                :checked="item.method==checkMethod"
                class="ico-check"
                role="radio"
                aria-disabled="false"
              ></radio>
            </view>
          </label>
          <view class="pay-img">
            <image
              class="wh100"
              :src="item.img"
              role="img"
            ></image>
          </view>
          <view style="display: flex;">
            <view>{{item.name}}</view>
            <view
              class="balace"
              v-if="index==0"
            >( 余额：¥ {{userInfo.user_money}} )</view>
          </view>
        </view>
      </block>
      <!-- 	
			<view @tap="checkPayWay" class="pay-item" data-method="wx_pay">
				<label role="radio" aria-disabled="false" aria-checked="false">
					<view>
						<radio class="ico-check" value="1" role="radio" aria-disabled="false" aria-checked="false"></radio>
					</view>
				</label>
				<view class="pay-img">
					<image class="wh100" :src="imgUrl+'cart/wx-pay.png'" role="img"></image>
				</view>
				<view style="display: flex;">
					<view>微信支付</view>
				</view>
			</view> -->
      <view
        @tap="payment"
        class="pay-now"
      >立即支付</view>

    </view>
    <!-- 支付 -->
    <view
      class="show1"
      v-if="balanceHide"
    >
      <view>
        <view class="use">
          输入支付密码
          <view
            @tap="close_coupons"
            class="close"
          >
            <image
              :src="imgUrl+'common/close.png'"
              role="img"
            ></image>
          </view>
        </view>

        <!-- <input  class='input'  @input='getBalancePwd'  maxlength="6" v-model="balance_pwd"   type='text' placeholder="测试" /> -->

        <view class="bot">

          <input
            unselectable="on"
            color="#fff"
            class='input'
            cursor-spacing="56"
            @input='getBalancePwd'
            confirm-hold="true"
            maxlength="6"
            v-model="balance_pwd"
            type='number'
            auto-focus
            :focus="focus"
          >
          </input>
          <view class="password">
            <block v-for="(item,index) in 6">
              <view
                class="dian"
                v-if="index<showNum"
              ></view>
            </block>
          </view>
        </view>
        <navigator
          class="forget"
          url="/pages/user/userinfo/userinfo"
          role="navigation"
        >忘记密码？</navigator>
      </view>
    </view>
  </view>
</template>

<script>
import common from "@/common/common.js";
import {
  getOrder,
  payUserMoney,
  getWxUserInfo,
  getOauth,
} from "@/api/api.js";
import { mapActions, mapState } from "vuex";
import getAppid from "@/mixin/getAppid.js";
import config from "@/api/config";
import Md from "md5";
import pay from "@/common/pay.js";
export default {
  data() {
    return {
      imgUrl: config.imgUrl,
      paytype: [
        {
          name: "余额支付",
          checked: true,
          logo: config.imgUrl + "cart/balance.png",
        },
        {
          name: "微信支付",
          checked: false,
          logo: config.imgUrl + "cart/wx-pay.png",
        },
      ],
      pay_method: [
        {
          name: "余额支付",
          checked: true,
          method: "balance_pay",
          img: config.imgUrl + "cart/balance.png",
          pay_code: "",
        },
        {
          name: "微信支付",
          method: "wx_pay",
          checked: false,
          img: config.imgUrl + "cart/wx-pay.png",
          pay_code: "",
        },
      ], //支付方式列表
      checkMethod: "balance_pay", //当前选中的支付方式，默认为余额支付
      master_order_sn: "", //主订单号
      order_sn: "", //子订单号
      orderDetail: "", //
      userInfo: "", //用户信息
      balanceHide: false,
      balance_pwd: "", //余额支付密码
      focus: false, //是否获得焦点
      maxLenth: 6,
      showNum: 0,
    };
  },
  mixins: [getAppid],
  onLoad(options) {
    console.log(options);
    let params = {};
    if (options.checkMethod) {
      this.checkMethod = options.checkMethod;
       const getUrlParam = (name) => {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) {
          return unescape(r[2]);
        }
        return null;
      };
      if (getUrlParam("code") != null) {
        console.log("ssss");
        let data = {
          code: getUrlParam("code"),
        };
        this.getWxUserInfo(data);
      }
    }
    /*获取微信返回的code*/

   

    if (options.order != undefined) {
      this.master_order_sn = options.order;
      params.master_order_sn = this.master_order_sn;

      this.getOrder(params);
    } else if (options.order_sn != undefined) {
      this.order_sn = options.order_sn;
      params.order_sn = this.order_sn;
      this.getOrder(params);
    }
  },
  computed: {
    ...mapState(["hasLogin", "user"]),
  },
  methods: {
    ...mapActions(["getUser"]),
    getWxUserInfo(params) {
      getWxUserInfo(params).then((res) => {
        console.log(res);
        if(res.open_id){
          let queryData = {
            order_sn: this.orderDetail.master_order_sn,
            openId: res.open_id,
          };
          pay.jsApiPayment(queryData, () => {
            this.jump(); //支付成功跳转
          });
        }else{
          /*这里没有执行 错误信息已经被统一拦截*/  
          // common.toast('none',res.msg,3000)
          let params={
            oauth:'weixin'
          }
          this.getOauth(params);
        }
        
      });
    },
    /*订单信息*/
    getOrder(params) {
      getOrder(params)
        .then((res) => {
          console.log(res);
          if (res) {
            this.orderDetail = res;
            //获取用户信息

            if (res.order_amount == 0) {
              if (res.master_order_sn != "") {
                uni.redirectTo({
                  url: `/pages/payment/payment?master_order_sn=${res.master_order_sn}`,
                });
              } else if (res.ordersn != "") {
                uni.redirectTo({
                  url: `/pages/payment/payment?order_sn=${res.ordersn}`,
                });
              }
            }
          }
        })
        .then(() => {
          this.getUser();
        })
        .then(() => {
          this.userInfo = this.user;
        });
    },
    checkPayWay(e) {
      console.log(e);
      let pay = e.currentTarget.dataset.method;
      this.checkMethod = pay;
    },

    /*支付*/
    payment() {
      /*支付零钱支付*/
      if (this.checkMethod == "balance_pay") {
        if (this.userInfo.user_money - this.orderDetail.order_amount < 0) {
          common.toast("none", "余额不足,请充值!");
          return;
        }
        this.balanceHide = true;
      } else if (this.checkMethod == "wx_pay") {
       
        
		
        if (pay.isWechat()) {
			// 公众号里面
		   let params={
			   oauth:'weixin'
		    }
		   this.getOauth(params);
        
        } else {

        }

      }
    },
    /*验证余额是否充足*/

    /*关闭支付*/
    close_coupons() {
      console.log("大于");
      this.balanceHide = false;
    },
    //输入密码
    getBalancePwd(e) {
      console.log(e.detail.value);
      this.balance_pwd = e.detail.value;
      if (this.balance_pwd.length <= this.maxLenth) {
        this.showNum = this.balance_pwd.length;
      }
      if (this.balance_pwd.length == 6) {
        var that = this;
        let password = Md("TPSHOP" + this.balance_pwd);
        if (that.master_order_sn != "") {
          var params = {
            master_order_sn: that.master_order_sn,

            pay_pwd: password,
          };
        } else if (that.order_sn != "") {
          var params = {
            order_sn: that.order_sn,

            pay_pwd: password,
          };
        }
        this.payUserMoney(params);
      }
    },
    getOauth(params) {
      getOauth(params).then((res) => {
		console.log(res);
		/*点击支付 先查询是否绑定open_id  绑定了就*/ 
		if(res){
			let queryData = {
				order_sn: this.orderDetail.master_order_sn,
				openId: res.openid,
			};
			pay.jsApiPayment(queryData, () => {
				this.jump(); //支付成功跳转
			});
		}else{
          let protocol = window.location.protocol; //协议
          let host = protocol + "//" + window.location.host+'/h5';
            let appId = this.appInfo.appid; //公众号appid
            let order_sn = this.master_order_sn || this.order_sn;
            let redirectUrl
            if(this.master_order_sn ){
               redirectUrl = `${host}/#/pages/cart/cart4/cart4?order=${order_sn}&checkMethod=${this.checkMethod}`;
            }else if(this.order_sn){
               redirectUrl = `${host}/#/pages/cart/cart4/cart4?order_sn=${order_sn}&checkMethod=${this.checkMethod}`;
            }
            
            let url = encodeURIComponent(redirectUrl);
            window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
		}
      });
    },
    /*余额支付*/
    payUserMoney(params) {
      payUserMoney(params).then((res) => {
        if (res.status == 1) {
          this.balanceHide = false;
          this.jump();
        }
        /*密码初始化*/
        this.input = ["", "", "", "", "", ""];
      });
    },
    jump() {
      //跳转
      var ordersn = this.order_sn;
      var master_order_sn = this.master_order_sn;
      if (master_order_sn != "") {
        uni.redirectTo({
          url: `/pages/payment/payment?master_order_sn=${master_order_sn}`,
        });
      } else if (ordersn != "") {
        uni.redirectTo({
          url: `/pages/payment/payment?order_sn=${ordersn}`,
        });
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.wx-radio-input {
  border-radius: 50%;
  /* 圆角 */
}
.password {
  display: flex;
  flex-direction: row;
  align-items: center;
  // justify-content: space-around;
  height: 110rpx;
}
.dian {
  display: flex;
  background: #333;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dian + .dian {
  margin-left: 100rpx;
}
radio .wx-radio-input.wx-radio-input-checked {
  border: none;
  background-color: red !important;
}

radio .wx-radio-input.wx-radio-input-checked::before {
  border-radius: 50%;
  /* 圆角 */
  width: 30rpx;
  /* 选中后对勾大小，不要超过背景的尺寸 */
  height: 30rpx;
  /* 选中后对勾大小，不要超过背景的尺寸 */
  line-height: 30rpx;
  text-align: center;
  font-size: 30rpx;
  /* 对勾大小 30rpx */
  color: #ffffff;
  /* 对勾颜色 白色 */
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

.order-list {
  border-bottom: 20rpx solid #eee;
}

.order-price {
  border-bottom: 2rpx solid #f3f3f3;
}

.order-price .co-red {
  font-size: 36rpx;
  font-weight: 600;
  color: #fa4949;
}

.order-id .id {
  font-size: 36rpx;
  color: #333;
}

.order-list > view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 102rpx;
  font-size: 30rpx;
  color: #3c3c3c;
}

.title {
  height: 100rpx;
  line-height: 100rpx;
  font-size: 30rpx;
  color: #333;
  font-weight: 600;
}

.pay-way {
  padding-bottom: 30rpx;
}

.pay-item {
  display: flex;
  height: 100rpx;
  align-items: center;
  font-size: 28rpx;
  color: #1a1a1a;
}

.ico-check {
  transform: scale(0.8);
  box-sizing: border-box;
  border: 2rpx solid #fff;
  width: 60rpx;
}

.balace {
  font-size: 24rpx;
  color: #666;
  margin-left: 25rpx;
  margin-top: 6rpx;
}

.close {
  float: right;
  padding-right: 30rpx;
}

.close image {
  width: 22rpx;
  height: 22rpx;
}

.pay-img {
  width: 68rpx;
  height: 68rpx;
  margin: 0 20rpx;
}

.pay-now {
  width: 690rpx;
  height: 84rpx;
  line-height: 84rpx;
  text-align: center;
  margin: 150rpx auto 0;
  background-color: #fa4949;
  color: #fff;
  border-radius: 10rpx;
  font-size: 30rpx;
}

.use-btn {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-left: 20rpx;
  line-height: 50rpx;
  text-align: center;
  border: 1px solid #f3f3f3;
  color: #fff;
}

.coupon-num {
  height: 36rpx;
  margin-left: 20rpx;
  padding: 0 16rpx;
  line-height: 36rpx;
  text-align: center;
  background-color: #ff3b3b;
  color: #fff;
  font-size: 24rpx;
}

.word-box {
  width: 600rpx;
  height: 40rpx;
  line-height: 40rpx;
  position: absolute;
  left: 80rpx;
  top: 37rpx;
}

.information {
  padding: 0 20rpx;
  background-color: #fff;
  margin: 20rpx 0;
}

.information .item {
  display: flex;
  justify-content: space-between;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  color: #666;
}

.btn-wrap {
  height: 100rpx;
  background-color: #fff;
}

.tips-btn {
  float: right;
  width: 200rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 30rpx;
  color: #fff;
  background-color: #ff3b3b;
}

.pay-amount {
  float: right;
  display: flex;
  align-items: center;
  height: 100rpx;
  font-size: 26rpx;
  margin-right: 40rpx;
}

.payable {
  color: #333;
  margin-right: 20rpx;
}

/* 物流列表弹框 */
.shipping-modal {
  z-index: 20;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: hidden;
  color: #666666;
  background-color: white;
}

.shipping-nav {
  text-align: center;
  font-size: 35rpx;
  padding-top: 30rpx;
}

.shipping-list {
  padding: 20rpx 30rpx 40rpx;
  font-size: 28rpx;
}

.shipping-item {
  display: block;
  padding: 20rpx 0;
}

.shipping-btn {
  width: 100%;
  color: white;
  background-color: #ff3b3b;
  line-height: 90rpx;
  text-align: center;
  font-size: 40rpx;
}

.store-list {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.store-mes {
  height: 34rpx;
  padding: 33rpx 20rpx;
  display: flex;
}

.coupon {
  display: flex;
}

.totle-weight {
  padding-right: 20rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: right;
}

.invoice-wrap {
  margin-top: 20rpx;
  margin-bottom: 0rpx;
}

.store-ico {
  height: 34rpx;
  width: 34rpx;
  margin-right: 20rpx;
}

switch .wx-switch-input {
  height: 42rpx;
  border-radius: 4rpx;
}

switch .wx-switch-input::before,
switch .wx-switch-input::after {
  height: 40rpx;
  border-radius: 4rpx;
}

.selfsubmit radio {
  float: right;
  transform: scale(0.7);
}

.selfsubmit-view {
  margin-top: 30rpx;
  padding-bottom: 20rpx;
  margin-bottom: 10rpx;
  border-bottom: 1px solid #f3f3f3;
}

.selfsubmit-view text {
  color: #666;
}

.radio-group {
  width: 100%;
  font-size: 26rpx;
}

.arrow-rigth {
  width: 32rpx;
  height: 32rpx;
  position: absolute;
  right: 0;
  top: 33rpx;
}

.use-points {
  padding-left: 10rpx;
}

/* 输入密码弹窗 */
.show1 {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  bottom: 0;
}

.show1 .bot {
  width: 660rpx;
  color: #333333;
  font-size: 26rpx;
  margin-left: 45rpx;
  height: 110rpx;
  border: 2rpx solid #f3f3f3;
  margin-top: 50rpx;
}

.show1 > view {
  position: absolute;
  width: 750rpx;
  height: 300rpx;
  padding-top: 35rpx;
  top: 50%;
  transform: translate(0, -50%);
  background: #fff;
}

.show1 .use {
  color: #1f1f1f;
  text-align: center;
  font-size: 30rpx;
}

.show1 .use text {
  color: #999;
  font-size: 15px;
  float: right;
  margin-right: 30rpx;
}

.show1 button {
  width: 690rpx;
  height: 70rpx;
  line-height: 70rpx;
  color: #fff;
  margin-left: 30rpx;
  margin-top: 150rpx;
  font-size: 30rpx;
  background-color: #ff4343;
  text-align: center;
  border-radius: 50rpx;
}

.show1 .input {
  width: 890rpx;
  height: 110rpx;
  border-radius: 5rpx;
  z-index: 5;
  opacity: 0;
  color: transparent;
  position: absolute;
  left: -200rpx;
  letter-spacing: 50rpx;
  font-size: 40rpx;
}

.password input {
  width: 108rpx;
  height: 110rpx;
  border-right: 2rpx solid #f3f3f3;
  float: left;
  text-align: center;
}

.forget {
  display: block;
  float: right;
  margin-right: 20rpx;
  font-size: 26rpx;
  margin-top: 10rpx;
}
</style>
